<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义tooltip</title>

    <style>
        #luluTip
        {
            word-wrap:break-word; /*自动换行,在FF中对英文和数字无效*/
            position:absolute;
            width:150px;
            color: #a00;
            background-color:#FFFFCC;
            border:1px solid #a00;
            padding:10px;
            display:none; /*我们先不要让它显示*/
        }
        #luluTip div.triangle /*后代选择器,选择ID为"luluTip"中DIV的类为"triangle"的元素*/
        {
            background: transparent url('http://www.cnblogs.com/images/cnblogs_com/qleelulu/sj.gif') no-repeat scroll left top;
            position: absolute;
            height: 17px;
            left: 20px;
            top: -16px;
            width: 31px;
            z-index: 999;
        }
    </style>
    <script src="js/jquery2.1.1.min.js"></script>
</head>
<body>

<div style="margin: 200px auto;width: 400px">
    <a myTip="测试提示内容!" href="#">测试</a>
</div>


<button id="btn">按钮</button>

<script>
    $(function(){

        $("[myTip]").hover(function(){         //jquery选取自定义标签  并绑定鼠标悬停事件



            $('<div id="luluTip"><div class="triangle" /></div>')
                .insertAfter(this)                  //在mytip  后面插入一个div节点
                .prepend($(this).attr("myTip"));    //$(this).attr("myTip")来获取"myTip"属性的值    prepend() 将该要显示的内容插入到我们刚才动态创建的DIV中.

            $(this).mousemove(function(e){           // this指[myTip]    绑定鼠标离开事件
                e=e || window.event;
                var x=e.pageX-36;
                if(x-2<0)
                    x=2;
                if(x+152>document.body.clientWidth)
                    x=document.body.clientWidth-152;
                $("#luluTip").css({"left":x,"top":e.pageY+10,"display":"block"});   //添加css样式
            });


        },function(){
            alert(111)
            $("#luluTip").remove();    //删除div节点
        })
    });




        $('#btn').hover(function (){
            $(this).mousemove(function (){
                console.log(11)
            })


        },function () {
               alert(2222)

            }

        )



</script>

</body>
</html>